<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <!-- 引用开发版 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;

        }
        .happy{
            background-color: red;
        }
        .sad{
            background-color: darkgray;
        }
        .normal{
            background-color: aqua;
        }
        .a{
            border-radius: 25px;
        }
        .b{
            font-size: 40px;
            color: cyan;
        }
        .c{
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <!--
    
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- 绑定class样式-字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
        
        <!-- 绑定class样式-数组写法，适用于：样式的类名不确定，样式个数不确定 -->
        <div class="basic" :class="classArr" @click="changeMood">{{name}}</div> <br/><br/>

        <!-- 绑定class样式-对象写法，适用于：样式的类名确定，样式个数确定，但动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

        <!-- 绑定style样式-对象写法 -->
        <div class="basic" :style="styleObj1">{{name}}</div> <br/><br/>
        
        <!-- 绑定style样式-数组 写法 -->
        <div class="basic" :style="styleArr">{{name}}</div> <br/><br/>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false

        const vm = new Vue({
            el:'#root',
            data:{
                name:'ydj',
                mood:'normal',
                classArr:['a','b','c'],
                classObj:{
                    a:false,
                    b:false
                },
                styleObj:{
                    fontSize:'50px'
                },
                styleObj1:{
                    backgroundColor: 'red'
                }
            },
            computed: {
                styleArr() {
                    return [this.styleObj, this.styleObj1]
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy','sad','normal']
                    let index = Math.floor(Math.random() * 3);
                    this.mood=arr[index]
                }
            }
        })
    </script>
</body>
</html